<template>
	<view>
		<view v-if="mode == 'normal'">
			<view class="cu-modal" :class="show  == true?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">{{title}}</view>
						<view class="action" @click="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<slot>
							{{content}}
						</slot>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="mode == 'bottom'">
			<view class="cu-modal bottom-modal" :class="show  == true?'show':''" >
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-green">确定</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="padding-xl" > 
					 <slot name="content" >
						 {{content}}
					 </slot>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	const app = getApp();
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const emit = defineEmits(['update:show']);
	const props = defineProps({
		mode: {
			type: String,
			default: 'normal'
		},
		show: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '默认标题'
		},
		content: {
			type: String,
			default: '默认内容'
		},
		height:{
			type:Number,
			default:100
		}
	})
	// 隐藏
	function hideModal() {
		emit('update:show', false);
	}
</script>
<style>
	@import "../../lib/main.css";
	@import "../../lib/icon.css";
	@import "../../lib/common.css";
</style>
